<template>
  <div>
    <!-- 交付经理上传审计材料 -->
    <div class="desc-item">
      <div class="form-item">项目审计材料</div>
      <!-- <div class="file-uploader" v-if="isShowApprovalOperation('first')">
        <el-upload
          class="upload-demo"
          action="#"
          :auto-upload="false"
          :on-change="handleFileChange"
          :on-remove="removeFile"
          :limit="1"
        >
          <template #trigger>
            <el-button type="primary">选择文件</el-button>
          </template>
          <template #tip>
            <div class="el-upload__tip">请选择要上传的文件</div>
          </template>
        </el-upload>
      </div> -->
      <div v-if="isShowApprovalOperation('first') && projectFiles[processStageName].length > 0">
        <div class="table-title">上传附件</div>
        <FilesUpload
          :fileTypes="projectFiles[processStageName]"
          :projectInfo="projectInfo"
          @getProjectFilesInfo="$emit('getProjectFilesInfo')"
        />
      </div>
      <div class="mb-16 flex"  v-if="isShowApprovalOperation('first')">
        <el-button class="ml-auto" type="primary" size="default" :disabled="projectAuditDoc.length === 0"
          @click="approvalProcess('agree', 'projectManager')">同意</el-button>
      </div>
      <div class="mb-16 flex"  v-if="!isShowApprovalOperation('first')">
        <div class="file-alerts" v-if="projectAuditDoc.length > 0">
          <el-alert
            v-for="file in projectAuditDoc"
            :key="file.doc_id"
            type="success"
            :closable="false"
            show-icon
            class="file-alert"
          >
          <template #title>
            <el-tooltip content="点击下载" placement="right">
              <a @click.prevent="downloadFile(file)">
                {{ file.file_name }}
              </a>
            </el-tooltip>
          </template>
          </el-alert>
        </div>
        <div class="file-alerts" v-else>
          <el-alert
            type="error"
            :closable="false"
            show-icon
            class="file-alert"
          >
            交付经理暂未上传文件
          </el-alert>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import * as KmsApi from '@/api/project/kms'
import * as IctApi from '@/api/project/ict'
import DynamicDescription from '@/views/project/projectDetails/components/DynamicDescription.vue'
import FilesUpload from '@/views/project/projectDetails/components//FilesUpload.vue';
import UserSelectDialog from '@/views/project/projectDetails/components/UserSelectDialog.vue'
import { ref, toRefs } from 'vue'

// emit事件合集
const emit = defineEmits(['getApprovalProcess', 'getProjectInfo', 'getProjectFilesInfo'])

// Props传值
const props = defineProps({
  isShowApprovalOperation: Function,
  projectInfo: Object,
  projectAuditDetails: Object,
  processStageName: String,
  taskName: String,
  role: String,
  processList: Array,
  projectFiles: Object
})
const { isShowApprovalOperation, projectInfo, projectAuditDetails, processStageName, taskName, role, processList } = toRefs(props)

const projectAuditDoc = projectInfo.value.files.filter(file => file.file_type === "审计材料");
const selectedFile = ref(null);

const handleFileChange = (uploadFile) => {
  selectedFile.value = uploadFile.raw;
};

const removeFile = () => {
  selectedFile.value = null;
};

// 下载附件
const downloadFile = (file) => {
  const params = {
    doc_id: file.doc_id,
    is_preview: false
  }
  KmsApi.previewAndDownloadFile(params).then((res) => {
    const downloadFileName = file.file_name
    const blobData = new Blob([res])
    const fileUrl = URL.createObjectURL(blobData);
    const link = document.createElement('a');
    link.href = fileUrl;
    link.setAttribute('download', downloadFileName);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(fileUrl);
  })
}


const approvalProcess = (result, currentRole) => {
  ElMessageBox.confirm('是否确认上传文件？', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    if (result === 'agree') {

      // const uploadData = new FormData();
      // uploadData.append('resource_name', projectInfo.value.project_name || '');
      // uploadData.append('resource_id', projectInfo.value.project_code || '');
      // uploadData.append('file_type', '审计材料');
      // uploadData.append('file', selectedFile.value);

      // await KmsApi.uploadFile(uploadData).then(() => {
        const agreeProcessData = {
          assignedUserIds: [],
          id: processList.value[0].id,
          reason: '同意',
          copyUserIds: [],
          variables: {}
        }

        const agreeData = {
          update: true,
          project_index_do: projectInfo.value,
          task_approve_req_vo: agreeProcessData
        }

        IctApi.agreeProjectAuditProcess(agreeData).then(() => {
          emit('getApprovalProcess')
          emit('getProjectInfo')
        })

      // })
    }
      
    ElMessage({
      type: 'success',
      message: '提交成功'
    })
  })
}

</script>

<style lang="scss" scoped>
@import url('@/views/project/projectDetails/styles/transfer.css');

.file-alerts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.file-alert {
  width: 100%;
}

.file-link:hover {
  text-decoration: underline;
}

/* 覆盖 Element Plus 的默认样式，如果需要的话 */
:deep(.el-alert__title) {
  width: 100%;
}
</style>